<template>
	<view class="item animated fadeInLeft">
		<view class="header">
			<view class="user">
				<image :src="list.userpic" lazy-load='true'></image>
				{{list.username}}
			</view>
			<view class="button">
				<view :class="['follow',{'active':isguanzhu}]" @tap="floow">
					<template v-if="!isguanzhu">
						<view class="iconfont iconjia"></view>关注
					</template>
					<template v-else>
						已关注
					</template>
				</view>
				<view class="clos iconfont iconguanbi" @tap="exit"></view>
			</view>
		</view>
		<view class="content">
			<view class="title">{{list.title}}</view>
			<view class="content_video">
				<image :src="list.titlepic" mode="widthFix" lazy-load='true'></image>
				<!-- video -->
				<template v-if="list.type==='video'">
					<view class="pay iconfont iconbofang"></view>
					<view class="video_info">{{`${list.paynum} 次播放 ${list.long}`}}</view>
				</template>
			</view>
		</view>
		<view class="footer">
			<view class="footer_left">
				<view :class="['good',{'active':infonum.index==1}]" @tap="Likes('ding')">
					<view class="iconfont iconhaoping"></view>
					{{infonum.dingnum}}
				</view>
				<view :class="['bad',{'active':infonum.index==2}]" @tap="Likes('cai')">
					<view class="iconfont iconchaping"></view>
					{{infonum.cainum}}
				</view>
			</view>
			<view class="footer_right">
				<view class="comment">
					<view class="iconfont iconpinglun"></view>
					{{list.commentnum}}
				</view>
				<view class="Forward">
					<view class="iconfont iconzhuanfa"></view>
					{{list.sharenum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infonum:this.list.infonum,
				isguanzhu:this.list.isguanzhu,
				display:this.list.display
			};
		},
		props:{
			list:{
				type:Object,
				default:()=>{
					return {}
				}
			},
		},
		methods:{
			floow(){
				console.log(this.list)
				this.isguanzhu=!this.isguanzhu
			},
			exit(){
				this.$emit('delet')
			},
			Likes(type){
				let index = this.infonum.index
				switch (type){
					case 'ding':
						if(index===1){ return }
						if(index==0){
							this.infonum.dingnum++
						}else if(index==2){
							this.infonum.dingnum++
							this.infonum.cainum--	
						}
						this.infonum.index=1
						break;
					case 'cai':
						if(index===2){ return }
						if(index==0){
							this.infonum.cainum++
						}else if(index==1){
							this.infonum.cainum++
							this.infonum.dingnum--	
						}
						this.infonum.index=2
						break;
					default:
						this.infonum.index=0
						break;
				}
			}
		}
	}
</script>

<style scoped>
.item{
	width: 100%;
	height: auto;
	padding: 25rpx 25rpx 40rpx 25rpx;
	box-sizing: border-box;
	position: relative;
}
.item::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	transform: scaleY(.5);
	background: #efefef;
}
.header{
	width: 100%;
	height: 90rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between ;
	font-size: 28rpx;
}
.header > .user{
	display: flex;
	align-items:center
}
.header > .user image{
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
.header >.button{
	float: right;
	display: flex;
	align-items:center;
	font-size:22rpx;
}
.header >.button .follow{
	padding: 10rpx;
	background: #f4f4f4;
	display: flex;
	border-radius: 4rpx;
	/* #f4ea2a */
}
.header >.button .follow.active{
	color: #fff;
	background: #FF9619;
}
.header >.button .clos{
	font-size: 28rpx;
	margin-left: 24rpx;
	color: #d4d4d4;
	font-weight: 700;
}
.content{
	font-size: 32rpx;
	display: flex;
	flex-direction: column;
	align-items:'stretch'
}
.content > .title{
	padding: 25rpx 0;
}
.content > .content_video{
	font-size: 0;
	line-height: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.content > .content_video image{
	width: 100%;
	border-radius: 10rpx;
}
.content > .content_video .pay{
	position: absolute;
	font-size: 150rpx;
	color: #fff;
	/* transform: translateX(-50%); */
	
}
.content >.content_video .video_info{
	position: absolute;
	bottom: 10rpx;
	right: 10rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	padding: 10rpx 20rpx;
	color: #fff;
	border-radius: 20rpx;
	box-sizing: border-box;
	background: rgba(0,0,0,.6);
}
.footer{
	display: flex;
	justify-content: space-between ;
	margin-top: 20rpx;
}
.footer view{
	display: flex;
	align-items: center;
	color: #d5d5d5;
	font-weight: normal;
	margin-right: 15rpx;
	font-size: 32rpx;
}
.footer .good.active,.footer .bad.active,.footer .good.active .iconfont,.footer .bad.active .iconfont{
	color: #fede33;
}
.footer view.Forward{
	margin: 0;
}
.footer>view:last-child{
	margin: 0;
}
.footer view.iconfont{
	font-size: 32rpx;
	
}
</style>
